<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript" src="../js/axios.min.js" ></script>
    <!--导入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--导入组件-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
   <!-- <h2>{{ message }}</h2>-->

<div id="tableView">
    <!--列表顶部搜索和工具条-->
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">

            <el-form-item label="角色">
                <el-input v-model="searchForm.name" placeholder="部门"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="search" @click="searchClick">查询</el-button>
                <el-button type="success" icon="plus" @click="addClick">新增</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <!--数据表格-->
    <el-row>
        <el-table
                :data="tableData"
                v-loading.body="loading"
                border
                @selection-change="selectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="120"
                    auto-complete="off">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="角色"
                    width="105">
            </el-table-column>


            <!--<el-table-column
                    prop="rid"
                    label="职位"
                    width="120">
            </el-table-column>-->
            <el-table-column
                    prop="beizhu"
                    label="职责"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template scope="scope">
                    <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">修改</el-button>
                    <el-button :plain="true" type="danger" size="small" icon="delete" @click="selectTree(scope.row)">授权</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>


    <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">

        <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[6, 12,18, 24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>

<!--编辑增加form表单-->

    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="编号" v-if="show">
                <el-input type="textarea" v-model="editForm.id" auto-complete="off" v-if="show"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="name">
                <el-input v-model="editForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="职责" prop="name">
                <el-input v-model="editForm.beizhu" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-input type="textarea" v-model="editForm.status"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
<!--权限树更改from表单-->
    <el-dialog title="权限管理" :visible.sync="updateFormVisible" :close-on-click-modal="false" :before-close="closeDialog">
        <center>

            <el-tree
                    :data="dataTree"
                    :props="defaultProps"
                    show-checkbox
                    ref="tree"
                    node-key="id"
                    :default-checked-keys="selected"
                    @check-change="selectedChange">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="updateFormVisible=false">取消</el-button>
                <el-button type="primary" @click.native="updateSubmit" :disabled="isDisabled" :loading="updateLoading">提交</el-button>
            </div>
        </center>
    </el-dialog>
    <!--权限界面-->
   <!-- <el-dialog title="编辑权限" :visible.sync="treeFormVisible" :close-on-click-modal="false">
        &lt;!&ndash;<el-form :model="treeForm" label-width="80px" :rules="treeFormRules" ref="treeForm">&ndash;&gt;
        <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                ref="tree"
                highlight-current
                :default-checked-keys="checked"
                @check-change="handleCheckChange"
                :props="defaultProps">
        </el-tree>
        &lt;!&ndash;</el-form>&ndash;&gt;
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="treeFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="treeSubmit" :loading="treeLoading">确定授权</el-button>
        </div>
    </el-dialog>-->
   <!--  <el-dialog title="quanxian" :visible.sync="editFormVisible2" :close-on-click-modal="true">
        <el-form :model="editForm2" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-tree
                    :props="props"
                    :load="loadNode"
                    lazy
                    show-checkbox
                    @check-change="handleCheckChange">
            </el-tree>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>-->

</div>
</div>

<script >
    var  app =new Vue({
        el:"#app",
        data:{
            message: '权限管理',
            //列表数据
            tableData: [],
            //显示加载中样式
            loading:false,
            //搜索表单
            searchForm: {

                name: ''//,
                //deptNo: ''223
            },
            //多选值
            multipleSelection: [],
            //当前页
            currentPage:1,
            //分页大小
            pageSize:6,
            //总记录数
            total:800,
            //删除的弹出框
            deleteVisible:false,
            //编辑界面是否显示
            editFormVisible: false,
            editLoading: false,
            //权限界面
            selectTreeVisible:false,
            updateFormVisible:false,
            editLoading: false,
            goUrl:'',
            editFormRules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            },
            //编辑界面数据
            editForm: {
                id:0,
                name: "",
                beizhu:"",
                status:""


            },
        },
        created:function(){
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            //alert("111");
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            var end =this.currentPage*this.pageSize+1;
            axios.post('/quanxian/list',{'start':start,'pageSize':this.pageSize}).then(function(response){
                // console.log(response.data);
                //alert(response.data.total);
                self.total=response.data.total;
                self.tableData = response.data.data;
                // self.multipleSelection=response.data.data;
            })
        },
        methods:{
            searchClick:function() {
                var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.currentPage*this.pageSize+1;
                //var searchForm =this.searchForm;

                var searchForm={'start':start,'pageSize':this.pageSize,'id':this.searchForm.id,'name':this.searchForm.name};
                // alert(searchForm);
                //formData.push({'start':start}).push({'end':end})
                axios.post('/quanxian/list',searchForm).then(function(response){
                    // console.log(response.data);
                    //alert(response.data.total);
                    self.total=response.data.total;
                    self.tableData = response.data.data;
                    // self.multipleSelection=response.data.data;
                })
                self.loadingData();//重新加载数据
            }
            ,
            //表格重新加载数据
            loadingData:function() {
                var _self = this;
                _self.loading = true;
                //var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.currentPage*this.pageSize+1;
                var searchForm={'start':start,'pageSize':this.pageSize,'id':this.searchForm.id,'name':this.searchForm.name,'deptNo':this.searchForm.deptNo};
                //   alert(JSON.stringify(searchForm));
                axios.post('/quanxian/list',searchForm).then(function(response){
                    console.log(response.data);
                    //alert(response.data);
                    _self.total=response.data.total;
                    _self.tableData = response.data.data;
                    //_self.multipleSelection=response.data.data;
                })
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },

            pageSizeChange:function(val) {
                console.log('每页 ' + val +' 条');
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //当前页修改事件
            currentPageChange:function(val) {
                this.currentPage = val;
                console.log('当前页: ' + val);
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            addClick:function() {
                //alert(111);
                this.goUrl="/quanxian/add";
                var _self = this;
                this.editForm={id:0,name:"",beizhu:"",status:""}
                this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                _self.loadingData();//重新加载数据
            },
        /* selectTree: function(row) {
                //alert(row.id);
                var _self = this;
                this.isDisabled=false;
                if(row.name=="admin"){
                    _self.isDisabled=true;
                    _self.$message({
                        message:row.name+'最高权限无法修改',
                        type:'error'
                    });
                }
                this.rid=row.id;
                var rid=row.id;
                //alert(rid);
                axios.post('/quanxian/listid?rid='+rid).then(function (response) {
                    axios.post('/tree/list').then(function(respons){
                        _self.dataTree = respons.data;
                        //alert(JSON.stringify(_self.dataTree));
                        var byRidList = response.data;
                        //alert(JSON.stringify(response.data));
                        _self.selected=[];

                        if(response.data.length>0){
                            //alert(JSON.stringify(response.data.length));
                            for(var i=0;i<response.data.length;i++){
                                var byRidMap=response.data[i];
                                //alert(JSON.stringify(response.data[i]["id"]));
                                var id=response.data[i]["id"];
                                alert(id);
                             // alert(id+"SSS"+i);
                                _self.selected.push(id);
                            }
                        }
                        _self.updateFormVisible = true;
                    });
                });

            },*/
          /*  selectTree:function (row) {
                this.rolename=row.rname;
                var self=this;
                this.roleid=row.rid;
                this.updateFormVisible = true;
                axios.post('/quanxian/listid2?rid='+row.rid).then(function (response) {
                    alert(row.rid);
                    //console.log(row.rid);
                    axios.post('/tree/list').then(function (res) {

                        self.dataTree=res.data;
                        //alert(JSON.stringify(self.dataTree));
                        var byRidList=response.data;
                        self.selected=[];

                        alert(response.data.length);
                        if (response.data.length>0){
                            for (var i=0;i<response.data.length;i++){
                                var byRidMap=response.data[i];
                                var id=response.data[i]["id"];
                                //alert(response.data);
                                alert(id);
                                self.selected.push(id);
                            }

                        }

                    })
                })
            },*/
          /*授权点击事件*/
            selectTree: function(row) {
                //alert(row.id);
                var _self = this;
                this.isDisabled=false;
                if(row.name=="admin"){
                    _self.isDisabled=true;
                    _self.$message({
                        message:row.name+'最高权限无法修改',
                        type:'error'
                    });
                }
                this.rid=row.id;
                var rid=row.id;
                //alert(rid);
                axios.post('/quanxian/listid2?rid='+rid).then(function (response) {
                    axios.post('/tree/list').then(function(respons){
                        _self.dataTree = respons.data;
                        //alert(JSON.stringify(_self.dataTree));
                        var byRidList = response.data;
                        //alert(JSON.stringify(response.data));
                        _self.selected=[];
                       // alert(response.data.data.length);
                        if(response.data.data.length>0){
                            //alert(JSON.stringify(response.data.length));
                            for(var i=1;i<response.data.data.length;i++){
                                var byRidMap=response.data[i];
                                //alert(JSON.stringify(response.data[i]["id"]));
                                var id=response.data.data[i].id;
                                //alert(id);
                                // alert(id+"SSS"+i);
                                _self.selected.push(id);
                            }
                        }
                        _self.updateFormVisible = true;
                    });
                });

            },
       /* selectTree: function(row) {
                //alert(row.id);
                var _self = this;
                this.isDisabled=false;
                if(row.name=="admin"){
                    _self.isDisabled=true;
                    _self.$message({
                        message:row.name+'最高权限无法修改',
                        type:'error'
                    });
                }
                this.rid=row.id;
                var rid=row.id;
                //alert(rid);
                axios.post('/quanxian/listid2?rid='+rid).then(function (response) {
                    axios.post('/tree/list').then(function(respons){
                        _self.dataTree = respons.data;
                        //alert(JSON.stringify(_self.dataTree));
                        var byRidList = response.data;
                     //   alert(JSON.stringify(response.data));
                        //var id=response.data[i]["id"];
                        alert(response.data.data.length);
                      //  alert(response.data.data[0].id);
                        if (response.data.data.length>0){
                            for (var i=1;i<response.data.data.length;i++){
                                //var byRidMap=response.data[i];
                                var id=response.data.data[i].id;
                                //alert(response.data);
                                alert(i);
                                alert(id);
                                self.selected.push(id);
                            }

                        }
                        //self.selected.push(id);
                        _self.updateFormVisible = true;

                    });
                });

            },
*/



           //权限树的选择框改变事件
            selectedChange:function(){

                var rad='';
                var ridsa = this.$refs.tree.getCheckedKeys().join(',');// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
                var ridsb = this.$refs.tree.getCheckedNodes();// 获取当前的选中的数据{对象}
                ridsb.forEach(ids=>{//获取选中的所有的父级id
                    rad+=','+ids.pid;
                    //alert(ids.pid);
                })
                rad=rad.substr(1);// 删除字符串前面的','
                var rids=rad+','+ridsa;
                var arr=rids.split(',');// 把字符串转换成数组
                arr=[...new Set(arr)]; // 数组去重

                rids=arr.join(',');// 把数组转换成字符串
                //alert(rids);
               // alert(rids[0]);
                 if (rids[0]==0){
                     rids=rids.substr(2);
                 }
               //rids=rids.substr(2);//删除字符串前面的'0'与',';
                //alert(rids);
                //只能选全部 部门只选单权限
                console.log(rids);
                this.ids=rids;
            // alert(rids+"aa")
            },
            //修改权限
            updateSubmit:function(){
                var _self = this;
                var rid=this.rid;
                //alert(rid);
                _self.loading = true;
                var ids = this.ids;
                //alert(ids);
                //不能选大权限
                this.$confirm('确认修改吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    var url="/quanxian/update2";
                    var map={ids:ids,rid:rid};
                   // alert(map.rid+"    "+map.ids);
                    axios.post(url,map).then( function (response){
                        if(response.data>0){
                            _self.$message({
                                message:'操作成功',
                                type:'success'
                            });
                            _self.updateFormVisible = false;
                        }else{
                            _self.$message({
                                message:'操作失败',
                                type:'error'
                            });
                        }
                        _self.loadingData();
                    });
                });

            },
            //表格勾选事件
            selectionChange:function(val) {
                for(var i=0;i<val.length;i++) {
                    var row = val[i];
                }
                this.multipleSelection = val;
                console.info(val);
            },
            //表格编辑事件
            editClick:function(row) {
                this.goUrl="/quanxian/update";
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            //保存点击事件
            editSubmit:function(){
                var _self = this;
                _self.loading = true;
                var formData =this.editForm;
                //alert(formData);
                var goUrl=this.goUrl;
                //alert(goUrl);
                //alert(JSON.stringify(formData));
                // axios.post("/emp/add",{"ename":this.editForm.ename,"job":this.editForm.job}).then(function(response){
                axios.post(goUrl,formData).then(function(response){
                    // console.log(response.data);
                    // alert(222);
                    // self.total=response.data.total;
                    if(response.data>0){
                        _self.editFormVisible = false;// 让弹出层隐藏
                        _self.loadingData();//重新加载数据
                    }
                })
                console.info(this.editForm);
            }
        }
    })

</script>
</body>
</html>